<template>
    <div class="thumb-example">
        <swiper class=" swiper-top swiper gallery-top" :options="swiperOptionTop"
                ref="swiperTop">

            <swiper-slide class="slide-1" v-for="pic in pictureList"
            >
                <vue-photo-zoom-pro
                        style="height: 100%"
                        :width="250"
                        :height="250"
                        :url="pic"
                        type="square"
                        :scale=1.5
                        :out-zoomer="false"
                        :mask="false"
                        :zoomer-style="{}"
                >

                </vue-photo-zoom-pro>
            </swiper-slide>

            <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
            <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
        </swiper>


        <!-- swiper2 Thumbs -->
        <div style="height: 4%"></div>
        <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">

            <swiper-slide v-for="pic in pictureList" class="slide-1"
                          :style="{'padding-bottom':'45px','background-image': 'url('+pic+')'}">
            </swiper-slide>

        </swiper>
    </div>
</template>

<script>
    import SwiperCore, {
        Navigation,
        Pagination,
        A11y,
        Thumbs,
        Controller,
        EffectCube,
        Mousewheel,
        HashNavigation
    } from 'swiper';
    import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
    import 'swiper/swiper-bundle.css'
    import 'swiper/components/navigation/navigation.scss';
    import 'swiper/components/pagination/pagination.scss';
    import 'swiper/components/scrollbar/scrollbar.scss';
    import SpecDetail from "./specDetail";
    import MaiMaoTabs from "../../common/MaiMaoTabs";

    SwiperCore.use([Navigation, Pagination, A11y, Thumbs, Controller, EffectCube, Mousewheel, HashNavigation]);

    export default {
        props: {
            pictureList: Array,
        },
        components: {
            Swiper,
            SwiperSlide,
        },
        directives: {
            swiper: directive
        },
        name: "mmSwiper",
        data() {
            return {
                //轮播大图配置
                swiperOptionTop: {
                    hashNavigation: true,//猫导航
                    mousewheel: true,//鼠标滚动
                    effect: "cube",// 默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    }
                },
                //缩略图配置
                swiperOptionThumbs: {
                    zoom: true,
                    spaceBetween: 0,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2, //触摸比例。触摸距离与slide滑动距离的比率。
                    slideToClickedSlide: true //设置为true则点击slide会过渡到这个slide。
                },
            }
        },
        mounted() {
            this.$nextTick(() => {
                const swiperTop = this.$refs.swiperTop.$swiper
                const swiperThumbs = this.$refs.swiperThumbs.$swiper
                swiperTop.controller.control = swiperThumbs
                swiperThumbs.controller.control = swiperTop
            })
        },
    }
</script>

<style scoped>

    .thumb-example {
        height: 390px;
        width: 350px;
        overflow: auto;
    }

    /*contain可以显示完整*/
    .swiper-slide {
        background-size: contain;
        background-position: center;
    }

    .swiper-top {
        border: thin solid #eaeaea;

    }

    .gallery-top {
        height: 80%;
        width: 100%;

    }

    /*缩略图*/
    .gallery-thumbs {
        height: 16%;
        padding: 0;
    }

    /*缩略图的slide*/
    .gallery-thumbs .swiper-slide {
        width: 20%;
        height: 100%;
        opacity: 0.4;
        background-size: contain;

        background-position-x: 55%;
    }

    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }
</style>